<script setup lang="ts">
import type { EchartsUIType } from '@vben/plugins/echarts';

import { ref } from 'vue';

import { EchartsUI, useEcharts } from '@vben/plugins/echarts';

import { Card } from 'ant-design-vue';

const chartRef = ref<EchartsUIType>();

const { renderEcharts } = useEcharts(chartRef);

renderEcharts({
  title: {
    text: '各个年龄段受骗统计',
    subtext: '数据来自网络',
    left: 'center',
  },
  tooltip: {
    trigger: 'item',
  },
  legend: {
    orient: 'vertical',
    left: 'left',
  },
  series: [
    {
      name: '年龄段',
      type: 'pie',

      radius: '50%',
      data: [
        { value: 335, name: '18-25岁' },
        { value: 310, name: '26-35岁' },
        { value: 234, name: '36-45岁' },
        { value: 135, name: '46-55岁' },
        { value: 1548, name: '56岁及以上' },
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)',
        },
      },
    },
  ],
  color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de'],
});
</script>

<template>
  <Card title="各个年龄段受骗统计">
    <EchartsUI ref="chartRef" />
  </Card>
</template>
